import React from 'react';
import { Cascader, Select, Spin } from 'antd';

import { CaretDownOutlined } from '#/utils/antdIcons';
import { TRDefault } from '#/components';
import renovate from '#/utils/renovate';

import TBasePage from './TBasePage';
import styles from './index.less';

const { Option } = Select;

function filter(inputValue, path) {
  return path.some((option) => option.label.indexOf(inputValue) > -1);
}

const filterList = function (array) {
  let list = [];
  array.forEach((item) => {
    let obj = { value: item.value, label: item.lable };
    if (item.children) {
      obj.children = filterList(item.children || []);
    }
    list.push(obj);
  });
  return list;
};

export const LoadingRender = () => {
  return (
    <div className={styles.basebox}>
      <Spin className={styles.spin} />
    </div>
  );
};

export const EmptyRender = () => <TRDefault type="empty" />;

export const ErrorRender = ({ message }) => <TRDefault type="error" message={message} />;

export default class TMainBasePage extends TBasePage {
  _isSpinLoading_ = false;
  constructor(props) {
    super(props);
    this.state.iconD = false;
    this.state.iconR = false;
    this.state.spinLoding = false;
    this.state.stationList = []; //结算单元
    this.state.selectStationList = []; //所选中的结算单元
    this.state.selectStationId = 0; //所选中的结算单元id
    this.state.selectRegionList = []; //所选中的区域
    this.state.dataSourceList = []; //数据线信息
    this.state.deptList = [];
    this.state.selectDeptId = 0;
    this.state.decomposeStrategyList = []; //策略集数组
    this.state.regionList = []; //区域
    this.state.errorMsg = '';
    this._isSpinLoading_ = false; //判断是否需要请求结算单元 第一次请求所用参数
  }
  componentDidMount() {
    renovate.isRenovate = false;
  }

  componentWillUnmount() {
    super.componentWillUnmount();
  }
  _onLoadingRender() {
    return <LoadingRender />;
  }
  _onEmptyRender() {
    return <TRDefault type="empty" />;
  }

  _onErrorRender(message) {
    return <TRDefault type="error" message={message} />;
  }

  _onStationRender() {
    const { stationList = [], selectStationList } = this.state;
    const options = filterList(stationList);
    let lastItem = this._onGetStationName(stationList, selectStationList);
    return (
      <div className={styles.header}>
        <div className={styles.main} style={{ marginTop: 0 }}>
          <Cascader
            className={styles.header}
            options={options}
            onPopupVisibleChange={() => {
              this.setState({
                iconD: !this.state.iconD,
              });
            }}
            allowClear={false}
            value={selectStationList}
            onChange={(value) => {
              this._onCascaderChange(value, 'station');
            }}
            showSearch={{ filter }}
            suffixIcon={
              <CaretDownOutlined
                className={styles.suffix}
                style={{ transform: this.state.iconD ? 'rotate(180deg)' : 'rotate(0deg)' }}
              />
            }
            style={{
              width: lastItem.includes('/')
                ? lastItem.length > 8
                  ? lastItem.length * 26
                  : lastItem.length * 30
                : lastItem.length > 3
                ? lastItem.length * 30
                : lastItem.length * 40,
            }}
          />
        </div>
      </div>
    );
  }

  _onRegionRender() {
    const { regionList = [], selectRegionList } = this.state;
    const options = filterList(regionList);
    let lastItem = this._onGetRegionName(regionList, selectRegionList);
    return (
      <div className={styles.header}>
        <div className={styles.main} style={{ marginTop: 0 }}>
          <Cascader
            className={styles.header}
            options={options}
            onPopupVisibleChange={() => {
              this.setState({
                iconR: !this.state.iconR,
              });
            }}
            allowClear={false}
            value={selectRegionList}
            onChange={(value) => {
              this._onCascaderChange(value, 'region');
            }}
            showSearch={{ filter }}
            suffixIcon={
              <CaretDownOutlined
                className={styles.suffix}
                style={{ transform: this.state.iconD ? 'rotate(180deg)' : 'rotate(0deg)' }}
              />
            }
            style={{
              width: lastItem.includes('/')
                ? lastItem.length > 8
                  ? lastItem.length * 26
                  : lastItem.length * 30
                : lastItem.length > 3
                ? lastItem.length * 30
                : lastItem.length * 40,
            }}
          />
        </div>
      </div>
    );
  }

  _onTopologyRender() {
    const { deptList = [] } = this.state;
    let menuDefault = '';
    if (deptList.length > 0 && deptList?.[0]?.deptId) {
      menuDefault = deptList?.[0]?.deptId;
    }
    return (
      <div className={styles.header}>
        <div className={styles.main} style={{ marginTop: 0 }}>
          <Select
            defaultValue={menuDefault}
            dropdownMatchSelectWidth={false}
            onChange={(value, option) => {
              this._onCascaderChange(value, 'dept', option?.deptNum || '');
            }}
            key={menuDefault}
            getPopupContainer={(triggerNode) => triggerNode.parentNode}
          >
            {deptList.map((item) => {
              return (
                <Option value={item.deptId} deptNum={item?.deptNum || ''} key={item.deptId}>
                  {item.deptName}
                </Option>
              );
            })}
          </Select>
        </div>
      </div>
    );
  }

  render() {
    return <div />;
  }
}
